<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>回放</title>
  <style>
    .container {
      display: flex;
      height: 98vh;
    }

    .left {
      width: 37%;
      border: 1px solid #ccc;
      padding: 10px;
    }

    .right {
      width: 63%;
      border: 1px solid #ccc;
      padding: 10px;
      margin-left: 5px;
    }

    .selectdiv {
      padding-top: 3px;
      width: 100%;
    }

    .selectdiv span {
      font-size: 12px;
      padding-right: 3px;
      line-height: 25px;
      height: 25px;
    }

    .selectdiv input {
      font-size: 12px;
      padding-right: 3px;
      line-height: 25px;
      height: 25px;
    }

    .selectdiv select {
      font-size: 12px;
      padding-right: 3px;
      line-height: 25px;
      height: 25px;
    }

    .selectdiv select option {
      font-size: 12px;
      padding-right: 3px;
      line-height: 25px;
      height: 25px;
    }

    .el-button--primary {
      font-size: 12px;
      line-height: 25px;
      height: 31px;
      color: #ffffff;
      background-color: #1890ff;
      border-color: #1890ff;
      border-radius: 3px;
      width: 80px;
      cursor: pointer;
    }

    .el-button--primary:hover,
    .el-button--primary:focus {
      background: #46a6ff;
      border-color: #46a6ff;
      color: #ffffff;
    }

    .table-border {
      border: 1px solid #dfe6ec;
      border-collapse: collapse;
      width: 100%;
      font-size: 12px;
      text-align: center;
    }

    .table-border td {
      border: 1px solid #dfe6ec;
      padding: 10px;
    }

    .relook {
      color: #46a6ff;
      text-decoration: none;
      cursor: pointer;
    }

    .relook:hover,
    .relook:focus {
      color: #188fff;
      cursor: pointer;
    }

    .history-date {
      position: relative;
      width: calc(100% - 10px);
      height: 26px;
      background-color: #636268;
      border: none;
      color: #f5f5f5;
      border-radius: 4px;
      padding-left: 6px;
    }

    .history-date::placeholder {
      color: #9D9D9D;
      /* 将这里的颜色代码换成你想要的颜色 */
    }

    #historyVideo {
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: flex-start;
    }

    #historyVideo>div {
      box-sizing: border-box;
      width: calc(50% - 4px);
      height: 100px;
      cursor: pointer;
      border: 1px solid #636268;
      margin-bottom: 8px;
    }

    #historyVideo>div:hover {
      box-shadow: 0 0 4px 1px #409EFF inset;
    }

    .historyVideo-item .item-title {
      box-sizing: border-box;
      padding: 6px 4px;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
    }

    .historyVideo-item.active {
      box-shadow: 0 0 4px 1px #409EFF inset;
    }

    .historyVideo-item .item-icon {
      box-sizing: border-box;
      text-align: center;
      padding-top: 8px;
    }

    .viceoAction {
      cursor: pointer;
      padding: 0 6px;
    }

    #playStartTime {
      background-color: #333333;
    }

    #actionGroup {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
      background-color: #333333;
    }

    input[type="range"]::-webkit-slider-thumb {
      cursor: pointer;
    }
  </style>
</head>

<body style="width: 100%; height: 100%; overflow: hidden; margin: 0; background-color: #38353D; color: #ffffff;">
  <div style="padding: 4px 20px;">
    <!-- <div style="display: flex; align-items: center; justify-content: space-between; height: 40px; background-color: #45424A;">
      <div style="padding: 0 15px;">基本信息</div>
      <div style="display: flex;">
        <div style="color: #9D9D9D;">实时视频</div>
        <div style="padding: 0 15px;">|</div>
        <div>视频回放</div>
      </div>
      <div style="padding: 0 15px;">
        <span>返回</span>
      </div>
    </div> -->
    <div style="display: flex;justify-content: space-between;">
      <div style="position: relative;width: calc(100% - 315px); height: calc(100vh - 24px); background-color: #535157;">
        <div id="playStartTime" style="padding: 2px 8px; height: 25px;"></div>
        <div id="divPlugin" class="plugin" style="width: calc(100% - 14px);height: calc(100% - 60px);"></div>
        <div id="actionGroup" style="padding: 4px 8px; display: flex; justify-content: space-between;">
          <div>
            <img class="viceoAction" src="./ico_pre.png" onclick="pre();" title="上一个" style="width: 20px;" alt="" srcset="">
            <img class="viceoAction" src="./ico_back.png" onclick="clickPlaySlow();" title="慢放" style="width: 20px;" alt="" srcset="">
            <img class="viceoAction" src="./ico_play1.png" id="videoPlay" onclick="clickResume();" title="播放" style="width: 20px;" alt="" srcset="">
            <img class="viceoAction" src="./ico_stop.png" id="videoPause" onclick="clickPause();" title="暂停" style="width: 20px;" alt="" srcset="">
            <img class="viceoAction" src="./ico_fast.png" onclick="clickPlayFast();" title="快放" style="width: 20px;" alt="" srcset="">
            <img class="viceoAction" src="./ico_next.png" onclick="next();" title="下一个" style="width: 20px;" alt="" srcset="">
          </div>
          <div style="display: flex;">
            <div class="viceoAction" style="display: flex;">
              <img src="./ico_volume.png" title="音量" style="width: 20px;" alt="" srcset="">
              <input type="range" name="" min="0" max="100" value="20" onchange="clickSetVolume(this.value);" id="">
            </div>
            <img class="viceoAction" src="./ico_full.png" onclick="clickFullScreen();" title="全屏" style="width: 20px;" alt="" srcset="">
          </div>
        </div>
      </div>
      <div style="width: 300px; padding: 12px; box-sizing: border-box; background-color: #535157;">
        <input type="text" name="date" readonly class="history-date" placeholder="请选择日期"
          onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d 23:59:59'})" onchange="changeDate(this.value)">
        <div id="historyVideo" style="height: calc(100vh - 150px); overflow: auto;"></div>
      </div>
    </div>
  </div>
  <!-- <div class="container">
    <div class="left">
      <div class="selectdiv">
        <span>圆堆</span><select id="select_Bunker" style="width: 12%">
          <option value="1" selected="selected">1#圆堆</option>
          <option value="2">2#圆堆</option>
        </select>
        <span>设备</span>
        <select id="select_Device" style="width: 15%">
          <option value="1" selected="selected">90度摄像机</option>
          <option value="2">180度摄像机</option>
          <option value="3">270度摄像机</option>
          <option value="4">0度摄像机</option>
        </select>
        <span>时间从</span>
        <input type="text" class="Wdate" id="startDate" style="width: 20%"
          onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d 23:59:59'})" />
        <span>到</span>
        <input type="text" class="Wdate" id="endDate" style="width: 20%"
          onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startDate\')}',maxDate:'%y-%M-%d 23:59:59'})" />
      </div>
      <div style="padding-top: 5px">
        <button id="btn_Select" class="el-button--primary" type="button" onclick="clickRecordSearch(0);">搜 索</button>
        <button id="btn_Relook" class="el-button--primary" onclick="clickStartPlayback('','')" type="button">回放所有</button>
      </div>
      <div style="padding-top: 5px">
        <table class="table-border" id="searchlist">
          <tr>
            <td style="width: 30px">序号</td>
            <td>文件编码</td>
            <td>开始时间</td>
            <td>结束时间</td>
            <td>操作</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="right">
      <div id="divPlugin" style="overflow: hidden;position: relative; width: 800px; height:600px;left:250px;top:120px;"></div>
    </div>
  </div> -->
</body>
<script src="./jquery-1.7.1.min.js"></script>
<script id="videonode" src="./webVideoCtrl.js"></script>
<script language="javascript" type="text/javascript" src="./My97DatePicker/WdatePicker.js"></script>

<script>
  // 初始化插件

  // 全局保存当前选中窗口
  var g_iWndIndex = 0 //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
  var g_oLocalConfig = null //本地配置

  //错误码
  //通用错误
  var ERROR_CODE_UNKNOWN = 1000 //未知错误
  var ERROR_CODE_NETWORKERROR = 1001 //网络错误
  var ERROR_CODE_PARAMERROR = 1002 //缺少插件元素

  //登录模块
  var ERROR_CODE_LOGIN_NOLOGIN = 2000 // 未登录
  var ERROR_CODE_LOGIN_REPEATLOGIN = 2001 //设备已登录，重复登录
  var ERROR_CODE_LOGIN_NOSUPPORT = 2002 //当前设备不支持Digest登录

  //预览播放
  var ERROR_CODE_PLAY_PLUGININITFAIL = 3000 //插件初始化失败
  var ERROR_CODE_PLAY_NOREPEATPLAY = 3001 //当前窗口已经在预览
  var ERROR_CODE_PLAY_PLAYBACKABNORMAL = 3002 //回放异常
  var ERROR_CODE_PLAY_PLAYBACKSTOP = 3003 //回放停止
  var ERROR_CODE_PLAY_NOFREESPACE = 3004 //录像过程中，硬盘容量不足

  //对讲
  var ERROR_CODE_TALK_FAIL = 5000 //语音对讲失败

  var version = 'V3.3.0build20230322';
  var szIP = '10.104.176.199',
    szPort = '8091',
    szUsername = 'admin',
    szPassword = 'hdkm@1234';
  var szDeviceIdentify = szIP + '_' + szPort;
  var rtspPort = "5541"
  var params = {};
  var devicePort = "";
  var deviceNameDesc = {
    "8055": "90度摄像机",
    "8056": "180度摄像机",
    "8057": "270度摄像机",
    "8058": "0度摄像机",
    "8075": "90度摄像机",
    "8076": "180度摄像机",
    "8077": "270度摄像机",
    "8078": "0度摄像机",
  };
  var devicePortVal = {
    "8055": 1,
    "8056": 2,
    "8057": 3,
    "8058": 4,
    "8075": 1,
    "8076": 2,
    "8077": 3,
    "8078": 4,
  };
  var select_Bunker = 1;
  var select_Device = 1;
  $(function () {
    if (window.location.search) {
      var parts = window.location.search.substring(1).split('&')
      for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=')
        if (!nv[0]) continue
        params[nv[0]] = nv[1] || true
      }
    }
    var ipselectData = params.id || "";
    var ipdata = ipselectData.split('_');
    var ipAndPort = ipdata[0].split(':');
    // rtspPort = ipdata[1];
    // var currentIp = ipAndPort[0];
    // szIP = currentIp;
    // var currentPort = ipAndPort[1];
    // szPort = currentPort;
    // szDeviceIdentify = currentIp + '_' + currentPort;
    devicePort = ipAndPort[1];
    select_Device = params.coal == "2" ? 2 : 1;
    select_Bunker = devicePortVal[devicePort] || 1;
    console.log("url参数",`设备名称：${deviceNameDesc[devicePort]}，设备端口：${devicePort}，煤场：${select_Device}`);
    setTimeout(() => {
      resize();// 初始化插件参数及插入插件
      WebVideoCtrl.I_InitPlugin({
        bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 1,
        cbSelWnd: function (xmlDoc) {
          g_iWndIndex = parseInt($(xmlDoc).find('SelectWnd').eq(0).text(), 10)
          var szInfo = '当前选择的窗口编号：' + g_iWndIndex
          showOPInfo(szInfo)
        },
        cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
          var szInfo = '当前放大的窗口编号：' + iWndIndex
          if (!bFullScreen) {
            szInfo = '当前还原的窗口编号：' + iWndIndex
          }
          showOPInfo(szInfo)
        },
        cbEvent: function (iEventType, iParam1, iParam2) {
          if (2 == iEventType) {
            // 回放正常结束
            showOPInfo('窗口' + iParam1 + '回放结束！')
          } else if (-1 == iEventType) {
            showOPInfo('设备' + iParam1 + '网络错误！')
          } else if (3001 == iEventType) {
            clickStopRecord(g_szRecordType, iParam1)
          }
        },
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin').then(
            () => {
              clickStartRealPlay()
              WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                if (bFlag) {
                  alert('检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！')
                }
              })
            },
            () => {
              alert('插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！')
            },
          )
        },
      });
    }, 1000);
    $("#videoPause").hide();
  });
  $(window).on('resize', resize);
  function resize() {
    if (!window.frameElement) {
      return;
    }
    // 解决iframe中嵌入海康插件初始化问题:
    // 1. 获取iframe相比于窗口的偏移量;
    const offset = window.parent.document.elementFromPoint(
      window.frameElement.getBoundingClientRect().left,
      window.frameElement.getBoundingClientRect().top
    ).getBoundingClientRect();
    // console.log('父级元素的偏移量:', offset);
    if (offset && (offset.top || offset.left)) {
      $("#divPlugin").css("margin-top", Number(offset.top) + "px");
      $("#divPlugin").css("margin-left", Number(offset.left) + 8 + "px");
      // $("#divPlugin").css("width", `calc(100% - ${Number(offset.left)}px)`);
      // $("#divPlugin").css("height", `calc(100vh - ${Number(offset.top) + 80}px)`);
      // let newWidth = $("#divPlugin").width();
      // let newheight = $("#divPlugin").height();
      // if (WebVideoCtrl) {
      //   WebVideoCtrl.I_Resize(newWidth, newheight);
      // }
    }
  }
  function clickStartRealPlay() {

    WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
      timeout: 3000,
      success: function (xmlDoc) {
        console.log("登录参数", szIP, szPort, szUsername, szPassword);
        showOPInfo('登录成功');
        // show2(1, szDeviceIdentify, 554)
      },
      error: function (oError) {
        console.log("登录参数", szIP, szPort, szUsername, szPassword);
        showOPInfo('登录失败', JSON.stringify(oError));
      },
    })
  }
  // 回放历史数据
  let historyList = [];
  // 当前点击播放序号
  let videoPlayIndex = 0;
  // 当前点击播放开始时间
  let videoPlayStart = "";
  // 更改日期
  function changeDate(params) {
    console.log(222, params);
    $("#historyVideo").empty();
    historyList = [];
    clickRecordSearch(0, params);
    // setHistoryVideo("2024-12-22 12:12:00", "2024-12-22 12:15:50");
    // setHistoryVideo("2024-12-22 13:12:00", "2024-12-22 13:16:30");
  }
  // 插入检索到的回放数据
  function setHistoryVideo(startTime, endTime) {
    historyList.push({
      startTime,
      endTime
    });
    console.log("插入回放数据", startTime, endTime);
    const diff = new Date(endTime).getTime() - new Date(startTime).getTime(); // 计算两个时间的毫秒差
    const diffSeconds = diff / 1000; // 转换为秒
    const minutes = Math.floor(diffSeconds / 60); // 计算分钟
    const seconds = Math.floor(diffSeconds % 60); // 计算剩余秒数
    const diffMS = `${minutes}'${seconds}"`;
    $("#historyVideo").append(`<div class="historyVideo-item" onclick="clickStartPlayback('${startTime}','${endTime}', ${historyList.length});">
        <div class="item-title"><span>${startTime.slice(0, 10)}</span><span>${diffMS}</span></div>
        <div class="item-icon"><img src="./ico_play.png" style="width: 32px;" alt="" srcset=""></div>
      </div>`);
  }
  function show2(iChannelID, szDeviceIdentify, rtspPort) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      iRtspPort = rtspPort,
      iChannelID = parseInt(iChannelID, 10),
      bZeroChannel = false,
      szInfo = ''
    var startRealPlay = function () {
      WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
        iStreamType: 1,
        iChannelID: iChannelID,
        bZeroChannel: bZeroChannel,
        success: function () {
          szInfo = '开始预览成功！'
          // showOPInfo(szDeviceIdentify + " " + szInfo);
        },
        error: function (oError) {
          // showOPInfo(szDeviceIdentify + " 开始预览失败！", oError.errorCode, oError.errorMsg);
        },
      })
    }

    if (oWndInfo != null) {
      // 已经在播放了，先停止
      WebVideoCtrl.I_Stop({
        success: function () {
          startRealPlay()
        },
      })
    } else {
      startRealPlay()
    }
  }
  var g_iSearchTimes = 0;
  // 搜索
  function clickRecordSearch(iType, date) {
    var szDeviceIdentify = szIP,
      iChannelID = 1,
      bZeroChannel = false, //非零通道
      iStreamType = 1, //主码流
      szStartTime = `${date} 00:00:00`,
      szEndTime = `${date} 23:59:59`
    var bunkerId = select_Bunker;
    var deviceId = select_Device;
    if (bunkerId == 2) {
      iChannelID = deviceId + 1
    } else {
      iChannelID = deviceId
    }
    console.log("检索条件", szDeviceIdentify, iChannelID, szStartTime, szEndTime);
    if (Date.parse(szEndTime.replace(/-/g, '/')) - Date.parse(szStartTime.replace(/-/g, '/')) < 0) {
      alert('开始时间大于结束时间')
      return
    }
    if (null == szDeviceIdentify) {
      return
    }

    if (bZeroChannel) {
      // 零通道不支持录像搜索
      return
    }

    if (0 == iType) {
      // 首次搜索
      // $('#searchlist  tr:not(:first)').remove()
      g_iSearchTimes = 0
    }

    //如果是前端设备，需要将搜索时间转换为UTC时间
    WebVideoCtrl.I_RecordSearch(szDeviceIdentify, iChannelID, szStartTime, szEndTime, {
      iStreamType: iStreamType,
      iSearchPos: g_iSearchTimes,
      success: function (xmlDoc) {
        if ('MORE' === $(xmlDoc).find('responseStatusStrg').eq(0).text()) {
          for (var i = 0, nLen = $(xmlDoc).find('searchMatchItem').length; i < nLen; i++) {
            var szPlaybackURI = $(xmlDoc).find('playbackURI').eq(i).text()
            if (szPlaybackURI.indexOf('name=') < 0) {
              break
            }
            // $('#searchlist').find("tbody")[0].append(content);
            // var objTr = $('#searchlist').get(0).insertRow(i + 1)
            // var objTd = objTr.insertCell(0)
            // objTd.id = 'downloadTd' + i
            // objTd.innerHTML = g_iSearchTimes + 1
            // objTd = objTr.insertCell(1)
            // objTd.innerHTML = szFileName
            // objTd = objTr.insertCell(2)
            // objTd.innerHTML = szStartTime.replace('T', ' ').replace('Z', '')
            // objTd = objTr.insertCell(3)
            // objTd.innerHTML = szEndTime.replace('T', ' ').replace('Z', '')
            // objTd = objTr.insertCell(4)
            // objTd.innerHTML = '<a href="###" class="relook"  onclick="clickStartPlayback(\'' + startTime + '\',\'' + endTime + '\')">查看回放</a>';
            // $('#downloadTd' + g_iSearchTimes).data('fileName', szFileName)
            // $('#downloadTd' + g_iSearchTimes).data('playbackURI', szPlaybackURI)
            // ++g_iSearchTimes
          }

          clickRecordSearch(1, date) // 继续搜索
        } else if ('OK' === $(xmlDoc).find('responseStatusStrg').eq(0).text()) {
          var iLength = $(xmlDoc).find('searchMatchItem').length
          for (var i = 0; i < iLength; i++) {
            var szPlaybackURI = $(xmlDoc).find('playbackURI').eq(i).text()
            if (szPlaybackURI.indexOf('name=') < 0) {
              break
            }
            var szStartTime = $(xmlDoc).find('startTime').eq(i).text();
            var szEndTime = $(xmlDoc).find('endTime').eq(i).text();
            // var szFileName = szPlaybackURI.substring(szPlaybackURI.indexOf('name=') + 5, szPlaybackURI.indexOf('&size='))
            // var objTr = $('#searchlist').get(0).insertRow(i + 1)
            // var objTd = objTr.insertCell(0)
            // objTd.id = 'downloadTd' + i
            // objTd.innerHTML = g_iSearchTimes + 1
            // objTd = objTr.insertCell(1)
            // objTd.innerHTML = szFileName
            // objTd = objTr.insertCell(2)
            var startTime = szStartTime.replace('T', ' ').replace('Z', '')
            var endTime = szEndTime.replace('T', ' ').replace('Z', '')
            setHistoryVideo(startTime, endTime);
            // objTd.innerHTML = startTime
            // objTd = objTr.insertCell(3)
            // objTd.innerHTML = endTime
            // objTd = objTr.insertCell(4)
            // objTd.innerHTML = '<a href="###" class="relook"  onclick="clickStartPlayback(\'' + startTime + '\',\'' + endTime + '\')">查看回放</a>';
            // $('#downloadTd' + g_iSearchTimes).data('fileName', szFileName)
            // $('#downloadTd' + g_iSearchTimes).data('playbackURI', szPlaybackURI)
            // ++g_iSearchTimes
          }
          showOPInfo(szDeviceIdentify + ' 搜索录像文件成功！')
        } else if ('NO MATCHES' === $(xmlDoc).find('responseStatusStrg').eq(0).text()) {
          setTimeout(function () {
            g_iSearchTimes = 0
            showOPInfo(szDeviceIdentify + ' 没有录像文件！')
          }, 50)
        }
      },
      error: function (oError) {
        g_iSearchTimes = 0
        showOPInfo(szDeviceIdentify + ' 搜索录像文件失败！', oError.errorCode, oError.errorMsg)
      },
    })
  }

  // 开始回放
  function clickStartPlayback(startTime, endTime, index) {
    // console.log(index);
    videoPlayIndex = index;
    videoPlayStart = startTime;
    $("#playStartTime").html(`${deviceNameDesc[devicePort]} ${startTime}`);
    $("#videoPlay").hide();
    $("#videoPause").show();
    $(`.historyVideo-item:eq(${index - 1})`).addClass('active').siblings().removeClass('active');
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      iRtspPort = 554,
      iStreamType = 1,//主码流
      bZeroChannel = false,//非零通道
      iChannelID = 1,
      szStartTime = startTime,
      szEndTime = endTime,
      szInfo = '',
      bChecked = false,
      iRet = -1;
    var bunkerId = select_Bunker;
    var deviceId = select_Device;
    if (bunkerId == 2) {
      iChannelID = deviceId + 1
    } else {
      iChannelID = deviceId
    }
    if (startTime != '') {
      szStartTime = $.trim(startTime);
      szEndTime = $.trim(endTime);
    } else {
      // var trContent = $('#searchlist  tr:not(:first)');
      // if (trContent.length <= 0) {
      //   alert('无可回放的文件，请先搜索文件');
      // }
    }
    if (null == szDeviceIdentify) {
      return
    }

    if (bZeroChannel) {
      // 零通道不支持回放
      return
    }

    var startPlayback = function () {
      if (bChecked) {
        // 启用转码回放
        var oTransCodeParam = {
          TransFrameRate: '14', // 0：全帧率，5：1，6：2，7：4，8：6，9：8，10：10，11：12，12：16，14：15，15：18，13：20，16：22
          TransResolution: '1', // 255：Auto，3：4CIF，2：QCIF，1：CIF
          TransBitrate: '19', // 2：32K，3：48K，4：64K，5：80K，6：96K，7：128K，8：160K，9：192K，10：224K，11：256K，12：320K，13：384K，14：448K，15：512K，16：640K，17：768K，18：896K，19：1024K，20：1280K，21：1536K，22：1792K，23：2048K，24：3072K，25：4096K，26：8192K
        }
        WebVideoCtrl.I_StartPlayback(szDeviceIdentify, {
          iRtspPort: iRtspPort,
          iStreamType: iStreamType,
          iChannelID: iChannelID,
          szStartTime: szStartTime,
          szEndTime: szEndTime,
          oTransCodeParam: oTransCodeParam,
          success: function () {
            szInfo = '开始回放成功！'
            showOPInfo(szDeviceIdentify + ' ' + szInfo)
          },
          error: function (oError) {
            szInfo = '开始回放失败！'
            showOPInfo(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg)
          },
        })
      } else {
        WebVideoCtrl.I_StartPlayback(szDeviceIdentify, {
          iRtspPort: iRtspPort,
          iStreamType: iStreamType,
          iChannelID: iChannelID,
          szStartTime: szStartTime,
          szEndTime: szEndTime,
          success: function () {
            szInfo = '开始回放成功！'
            showOPInfo(szDeviceIdentify + ' ' + szInfo)
          },
          error: function (oError) {
            szInfo = '开始回放失败！'
            showOPInfo(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg)
          },
        })
      }
    }

    if (oWndInfo != null) {
      // 已经在播放了，先停止
      WebVideoCtrl.I_Stop({
        success: function () {
          startPlayback()
        },
      })
    } else {
      startPlayback()
    }
  }

  // 停止回放
  function clickStopPlayback() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = ''

    if (oWndInfo != null) {
      WebVideoCtrl.I_Stop({
        success: function () {
          szInfo = '停止回放成功！'
          showOPInfo(oWndInfo.szDeviceIdentify + ' ' + szInfo)
        },
        error: function (oError) {
          szInfo = '停止回放失败！'
          showOPInfo(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  // 暂停
  function clickPause() {
    if (videoPlayIndex < 1) {
      return;
    }
    $("#videoPlay").show();
    $("#videoPause").hide();
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = "";

    if (oWndInfo != null) {
      WebVideoCtrl.I_Pause({
        success: function () {
          szInfo = "暂停成功！";
          showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
        },
        error: function (oError) {
          szInfo = "暂停失败！";
          showOPInfo(oWndInfo.szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
        }
      });
    }
  }
  // 恢复
  function clickResume() {
    if (videoPlayIndex < 1) {
      return;
    }
    $("#videoPlay").hide();
    $("#videoPause").show();
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = "";

    if (oWndInfo != null) {
      WebVideoCtrl.I_Resume({
        success: function () {
          szInfo = "恢复成功！";
          showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
        },
        error: function (oError) {
          szInfo = "恢复失败！";
          showOPInfo(oWndInfo.szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
        }
      });
    }
  }

  // 上一个
  function pre() {
    if (videoPlayIndex < 1) {
      return;
    }
    if (videoPlayIndex > 1) {
      clickStartPlayback(historyList[videoPlayIndex - 2].startTime, historyList[videoPlayIndex - 2].endTime, videoPlayIndex - 1);
    }
  }
  // 下一个
  function next() {
    if (videoPlayIndex < 1) {
      return;
    }
    if (videoPlayIndex < historyList.length) {
      clickStartPlayback(historyList[videoPlayIndex].startTime, historyList[videoPlayIndex].endTime, videoPlayIndex + 1);
    }
  }
  // 慢放
  function clickPlaySlow() {
    if (videoPlayIndex < 1) {
      return;
    }
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = "";

    if (oWndInfo != null) {
      WebVideoCtrl.I_PlaySlow({
        success: function () {
          szInfo = "慢放成功！";
          showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
        },
        error: function (oError) {
          szInfo = "慢放失败！";
          showOPInfo(oWndInfo.szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
        }
      });
    }
  }

  // 快放
  function clickPlayFast() {
    if (videoPlayIndex < 1) {
      return;
    }
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = "";

    if (oWndInfo != null) {
      WebVideoCtrl.I_PlayFast({
        success: function () {
          szInfo = "快放成功！";
          showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
        },
        error: function (oError) {
          szInfo = "快放失败！";
          showOPInfo(oWndInfo.szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
        }
      });
    }
  }
  function showOPInfo(szInfo, status, xmlDoc) {
    var szTip = '<div>' + szInfo
    if (typeof status != 'undefined' && status != 200) {
      var szStatusString = $(xmlDoc).find('statusString').eq(0).text()
      var szSubStatusCode = $(xmlDoc).find('subStatusCode').eq(0).text()
      if ('' === szSubStatusCode) {
        if ('' === szSubStatusCode && '' === szStatusString) {
          szTip += '(' + status + ')'
        } else {
          szTip += '(' + status + ', ' + szStatusString + ')'
        }
      } else {
        szTip += '(' + status + ', ' + szSubStatusCode + ')'
      }
    }
    szTip += '</div>'

    console.log(szTip)
  }

  // 设置音量
  function clickSetVolume(volume) {
    if (videoPlayIndex < 1) {
      return;
    }
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      iVolume = parseInt(volume, 10),
      szInfo = "";

    if (oWndInfo != null) {
      WebVideoCtrl.I_SetVolume(iVolume).then(() => {
        showOPInfo(oWndInfo.szDeviceIdentify + " " + "设置音量成功");
      }, (oError) => {
        var szInfo = " 设置音量失败！";
        showOPInfo(oWndInfo.szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
      });
    }
  }
  // 全屏
  function clickFullScreen() {
    WebVideoCtrl.I_FullScreen(true).then(() => {
      showOPInfo("全屏成功");
    }, (oError) => {
      showOPInfo("全屏失败！", oError.errorCode, oError.errorMsg);
    });
  }
</script>

</html>